<template>
    <view class="page">
            <view class="image-item" >
                <view class="image-content" >
                    <image src="/static/p2.jpg" mode="scaleToFill"  ></image>
                </view>
            </view>			
    </view>
	
	<view style="position: absolute;top:400rpx;width: 100%;">
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(0)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">1、 陈云生平业绩展览</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(1)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">2、 主题电影展映</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(2)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">3、 主题记录片展播</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(3)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">4、《弘扬伟大精神》主题党课</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(4)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">5、《信仰的见证》文物党课</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		<view class="uni-flex uni-row" style="width: 100vw;height: 70rpx;line-height: 70rpx;" >
			<view style="width: 20%;text-align: center;"></view>
			<view @click="openExSuccess(5)" style="width: 80%;height: 70rpx;font-weight: bold;color: #ffe5b3;">6、《弦上江南》评弹党课</view>			
			<view style="width: 10%;text-align: center;"></view>
		</view>
		
		
	</view>
	
	
	<view :style="dynamicStyle">
	        <view class="uni-flex uni-row" style="height: 200rpx;line-height: 200rpx;">
	            <view style="height: 150rpx;line-height: 150rpx;">
	                <image src="/static/ic_tips.png" @click="handleGoToMap" mode="widthFix"  style="width: 200rpx;vertical-align: middle;"></image>
	            </view>
				<view style="width: 50rpx;"></view>
	            <view style="height: 150rpx;line-height: 150rpx;">
	                <image src="/static/ic_hit.png" @click="handleGoToMap"  mode="widthFix" style="width: 100rpx;vertical-align: middle;"></image>
	            </view>
	        </view>
	    </view>
	
	
	<!-- 详情弹窗 -->
	<uni-popup ref="popupExSuccess" :mask-click="false">
		<view class="uni-flex uni-column">
			<view class="flex-item-V" style="
			            border: 5rpx solid #a27b46;
			            width: 90vw;
			            height: 45vh;
			            display: flex;
			            align-items: top;
			            justify-content: top;
			            background-color: rgba(248, 233, 204, 0.9); /* 黄色透明度80% */
			            box-sizing: border-box;
			        ">
			            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			            					@scrolltolower="lower" @scroll="scroll">
			            					<view id="demo1" class="scroll-view-item" style="padding: 20rpx;">
												
												<view style="color: #a68255;font-weight: bold;font-size: 20px;">{{detailTitle}}</view>
												<view style="color: #a68255;font-size: 14px;margin-top: 10rpx;line-height: 2;">{{detailCotent}}</view>
												
											</view>
			            					
			            				</scroll-view>
			        </view>
			<view class="flex-item-V" style="text-align: center;margin-top: 20rpx;">
			<image @click="closeExSucess" src="/static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFit"></image>		
			</view>
		</view>
	</uni-popup>
</template>


<script>
	export default {
		data() {
			return {
				detailTitle:'陈云生平业绩展览',
				detailCotent:'展览以时间为线索，精选100多张珍贵图片、32件文献资料，以及陈云同志手书的“十五字诀”条幅、使用过的棕色皮箱等13件珍贵文物图片，集中展现了陈云同志伟大光辉的一生。在长达70年的革命生涯中，陈云同志以其卓越的政治智慧、坚定的理想信念和崇高的精神品格为党和人民事业作出了不可磨灭的贡献。',
				
				 dynamicStyle: {
				                position: 'absolute',
				                left: '10rpx', // 默认值
				                top: '10rpx'   // 默认值
				            },
							
				detailTitleArray:[
					{
						detailTitle:'陈云生平业绩展览',
						detailCotent:'展览以时间为线索，精选100多张珍贵图片、32件文献资料，以及陈云同志手书的“十五字诀”条幅、使用过的棕色皮箱等13件珍贵文物图片，集中展现了陈云同志伟大光辉的一生。在长达70年的革命生涯中，陈云同志以其卓越的政治智慧、坚定的理想信念和崇高的精神品格为党和人民事业作出了不可磨灭的贡献。'
					},{
						detailTitle:'主题电影展映',
						detailCotent:'该片讲述1937年至1944年抗日战争时期，陈云同志在延安担任中组部部长期间，在毛泽东同志的领导和支持下创造性地开展党建工作的故事，系首部将延安时期党建工作搬上大银幕的电影。'
					},{
						detailTitle:'主题纪录片展播',
						detailCotent:'该片通过历史影像、文献资料、文物展陈和亲历者讲述、嘉宾访谈等多种形式，生动呈现陈云同志在中国革命、建设和改革中的重大贡献，深入阐释陈云同志精神风范及其时代价值。'
					},{
						detailTitle:'弘扬伟大精神专题党课',
						detailCotent:'《陈云精神风范解读》内容简介：课程主要从坚定理想信念、坚强党性原则、求真务实作风、朴素公仆情怀、勤奋学习精神五个方面,全面讲述陈云同志伟大光辉的-生、崇高的思想品德和精神风范。《陈云与调查研究》内容简介：调查研究是我们党的传家宝,是做好各项工作的基本功。该课程主要讲述陈云同志作为我们党公认的善于调查研究的楷模，针对党和国家事业发展中的一系列重大问题深入开展调查研究的思想实践、科学方法和现实启示。《陈云家风:共产党人家风的典范》内容简介：习近平总书记指出：在培育良好家风方面，老一辈革命家为我们作出了榜样。该课程介绍了家风建设的重要性；陈云家风建设的主要内容；陈云家风建设的现实启示。'
					},{
						detailTitle:'《陈云文物故事党课》内容简介：',
						detailCotent:'课程精选陈云同志生前具有代表性的文物，每一件文物都是历史的见证。透过这些静默的实物，深入讲述其背后鲜活动人的故事，生动还原陈云同志在革命、建设、改革岁月中的卓越贡献与崇高风范，让观众在文物与故事的对话中，深刻感悟那份穿越时空的初心力量。'
					},{
						detailTitle:'《弦上江南》评弹党课内容简介：',
						detailCotent:'这是陈云纪念馆推出的一门特色课程，紧扣陈云同志与评弹艺术的不解之缘，以他毕生珍爱并曾亲自指导抢救的评弹为媒介，生动讲述陈云同志的生平业绩与精神风范，引导学员在丝弦雅韵中感悟陈云同志的崇高品格与为民情怀，从而实现红色基因传承与非物质文化遗产美育的有机融合。'
					}
				]
			}
		},
		onLoad() {
		        this.updatePosition();
		    },
		methods: {
			
			openExSuccess(index){
				this.detailTitle = this.detailTitleArray[index].detailTitle;
				this.detailCotent = this.detailTitleArray[index].detailCotent;
				this.$refs.popupExSuccess.open('center')
			},
			
			closeExSucess() {
						this.$refs.popupExSuccess.close()
					},
			
			 updatePosition() {
			            // 获取系统信息
			            uni.getSystemInfo({
			                success: (res) => {
			                    const screenWidth = res.screenWidth;
			                    const screenHeight = res.screenHeight;
			                    
			                    console.log('屏幕宽度:', screenWidth, '屏幕高度:', screenHeight);
			                    
			                    // 根据屏幕尺寸计算新的位置
			                    const newLeft = this.calculateLeft(screenWidth);
			                    const newTop = this.calculateTop(screenHeight);
			                    
			                    // 更新样式
			                    this.dynamicStyle = {
			                        position: 'absolute',
			                        left: newLeft + 'px',
			                        top: newTop + 'px'
			                    };
			                },
			                fail: (error) => {
			                    console.error('获取系统信息失败:', error);
			                }
			            });
			        },
			        
			calculateLeft(screenWidth) {
				// 示例：根据屏幕宽度计算left值
				// 比如设置为屏幕宽度的5%
				return Math.floor(screenWidth * 0.3);
			},
			
			calculateTop(screenHeight) {
				// 示例：根据屏幕高度计算top值
				// 比如设置为屏幕高度的3%
				return Math.floor(screenHeight * 0.6);
			},
			
			 handleImageClick() {
			            // 方式1: 使用 navigateTo 跳转（推荐，可返回）
			            uni.navigateTo({
			                url: '/pages/index/page3'
			            });
			            
			            // 方式2: 使用 redirectTo 跳转（关闭当前页，不可返回）
			            // uni.redirectTo({
			            //     url: '/pages/目标页面路径/目标页面'
			            // });
			            
			            // 方式3: 使用 switchTab 跳转（跳转到tabbar页面）
			            // uni.switchTab({
			            //     url: '/pages/tabBar/目标tab页面'
			            // });
			        },
			handleGoToMap() {
				uni.navigateTo({
				    url: '/pages/index/get-location'
				});
			}
		}
	}
</script>

<style>
	.page {
		position: fixed;
	    width: 100vw;
	    height: 100vh;
	    margin: 0;
	    padding: 0;
	}
	
	.image-item {
	    width: 100%;
	    height: 100%;
	}
	
	.image-content {
	    width: 100%;
	    height: 100%;
	}
	
	.image-content image {
	    width: 100%;
	    height: 100%;
	    display: block;
	}
</style>
